<template>
  <el-card class="app-container">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="店铺发货投诉赔付统计" name="store">
        <div>
          <el-form size="mini" inline>
            <el-form-item>
              <el-select v-model="formData.dateRange4StoreUser.storeId" clearable placeholder="请选择店铺">
                <el-option v-for="store in storeList" :key="store.value" :value="store.value" :label="store.label"/>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-date-picker
                v-model="formData.dateRange4StoreUser.dateRange"
                type="daterange"
                range-separator="至"
                value-format="yyyy-MM-dd"
                style="width: 250px"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button @click="loadRevocationRateByStore" type="primary">搜索</el-button>
              <el-button @click="exportRevocationRateByStore" type="danger">导出</el-button>
            </el-form-item>
          </el-form>
          <div class="data-table">
            <table v-loading="revocationRateByStoreUserLoading">
              <thead>
              <tr>
                <th :rowspan="2">
                  店铺
                </th>
                <th :colspan="(op.value === 0 ||op.value === 3)?6:4" v-for="op in payOutTypeOptions" :key="op.value">
                  <el-tooltip class="item" effect="dark" :content="op.extra.tip" placement="bottom">
                    <div> {{ op.label }}</div>
                  </el-tooltip>
                </th>

                <th rowspan="2">
                  本应赔付金额汇总
                </th>
                <th rowspan="2">
                  结余金额汇总
                </th>
                <th rowspan="2">
                  店铺赔付总计
                </th>
                <th rowspan="2">
                  店铺赔付增长率（同期）
                </th>
              </tr>
              <tr>

                <template v-for="op in payOutTypeOptions">
                  <th :key="op.value+'-1'">
                    投诉赔付金额
                  </th>
                  <th :key="op.value+'-2'">
                    投诉赔付数量
                  </th>
                  <th :key="op.value+'-3'">
                    投诉赔付金额占比
                  </th>
                  <th :key="op.value+'-4'">
                    投诉赔付增长率（同期）
                  </th>
                  <th :key="op.value+'-5'" v-if="op.value === 0 ||op.value === 3">
                    本应赔付金额
                  </th>
                  <th :key="op.value+'-6'" v-if="op.value === 0 ||op.value === 3">
                    结余金额
                  </th>
                </template>

              </tr>
              </thead>
              <tbody>
              <tr v-for="(item,itemIndex) in revocationRateByStoreUser" :key="itemIndex">
                <td align="center">
                  {{ item.storeName }}
                </td>
                <template v-for="op in payOutTypeOptions">
                  <td :key="itemIndex+'-'+op.value + '-1'" align="center">
                    {{ item.typeData[op.value].payOutAmount || 0 }}
                  </td>
                  <td :key="itemIndex+'-'+op.value + '-2'" align="center">
                    {{ item.typeData[op.value].payOutCount || 0 }}
                  </td>
                  <td :key="itemIndex+'-'+op.value + '-3'" align="center">
                    {{ item.typeData[op.value].payOutAmountRate || 0 }} %
                  </td>
                  <td :key="itemIndex+'-'+op.value + '-4'" align="center">
                    {{ item.typeData[op.value].payOutCountIncRate || 0 }} %
                  </td>
                  <td :key="itemIndex+'-'+op.value + '-5'" align="center" v-if="op.value === 0 ||op.value === 3">
                    {{ item.typeData[op.value].originPayOutAmount || 0 }}
                  </td>
                  <td :key="itemIndex+'-'+op.value + '-6'" align="center" v-if="op.value === 0 ||op.value === 3">
                    {{ item.typeData[op.value].leftAmount || 0 }}
                  </td>
                </template>
                <td align="center">
                  {{ item.originPayOutAmount }}
                </td>
                <td align="center">
                  {{ item.leftAmount }}
                </td>
                <td align="center">
                  {{ item.payOutAmount }}
                </td>
                <td align="center">
                  {{ item.payOutCountIncRate }} %
                </td>
              </tr>
              </tbody>
            </table>
            <el-empty v-if="!revocationRateByStoreUser.length && !revocationRateByStoreUserLoading">

            </el-empty>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="店铺发货投诉赔付趋势统计" name="storeDaily">
        <div>
          <el-form size="mini" inline>
            <!--            <el-form-item label="赔付类型">-->
            <!--              <el-select v-model="formData.dateRange4StoreDaily.payOutType">-->
            <!--                <el-option-->
            <!--                  v-for="op in payOutTypeOptions"-->
            <!--                  :key="op.value"-->
            <!--                  :value="op.value"-->
            <!--                  :label="op.label"></el-option>-->
            <!--              </el-select>-->
            <!--            </el-form-item>-->
            <el-form-item label="赔付类型">
              <el-select v-model="formData.dateRange4StoreDaily.payOutType" clearable>
                <el-option
                  v-for="op in payOutTypeOptions"
                  :key="op.value"
                  :value="op.value"
                  :label="op.label"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-date-picker
                v-model="formData.dateRange4StoreDaily.dateRange"
                type="daterange"
                range-separator="至"
                value-format="yyyy-MM-dd"
                style="width: 250px"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button @click="loadRevocationRateByUserDaily" type="primary">搜索</el-button>
              <!--              <el-button @click="exportRevocationRateByUser" type="danger">导出</el-button>-->
            </el-form-item>
          </el-form>
          <div class="data-table" v-loading="revocationRateByStoreDailyLoading" style="min-height: 200px">
            <div class="chart-data" v-for="(chart,idx) in chartList" :key="idx">

              <div class="chart-data__chart">
                <chart :option="chart"/>
              </div>
              <div class="chart-data__table">
                <table>
                  <!--                  <thead>-->
                  <!--                  <tr>-->
                  <!--                    <th>店铺</th>-->
                  <!--                    <th>{{ chart.title.text }}</th>-->
                  <!--                  </tr>-->
                  <!--                  </thead>-->
                  <tbody>
                  <tr v-for="d in chart.tableData" :key="d.name">
                    <td>{{ d.name }}</td>
                    <td>{{ d.data }}</td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="个人发货投诉赔付统计" name="user">
        <div>
          <el-form size="mini" inline>
            <el-form-item>
              <el-date-picker
                v-model="formData.dateRange4Store.dateRange"
                type="daterange"
                range-separator="至"
                value-format="yyyy-MM-dd"
                style="width: 250px"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button @click="loadRevocationRateByUser" type="primary">搜索</el-button>
              <el-button @click="exportRevocationRateByUser" type="danger">导出</el-button>
            </el-form-item>
          </el-form>
          <div class="data-table">
            <table v-loading="revocationRateByFollowerLoading">
              <thead>
              <tr>
                <th>
                  姓名
                </th>
                <th>
                  投诉撤销汇总
                </th>
                <th>
                  投诉撤销占比
                </th>
                <th>
                  投诉赔付金额汇总
                </th>
                <th>
                  撤销赔付平均金额
                </th>
                <th>
                  投诉赔付金额占比
                </th>
                <th>
                  撤销本应赔付金额
                </th>
                <th>
                  撤销节余金额
                </th>
                <th>
                  其他（劝退款赔付）
                </th>
                <th>
                  其他赔付占比
                </th>
                <th>
                  其他（劝退款赔付金额）
                </th>
                <th>
                  其他赔付金额占比
                </th>
                <th>劝退本应赔付金额</th>
                <th>劝退节余金额</th>
                <th>本应赔付金额汇总</th>
                <th>节余金额汇总</th>
                <th>
                  同期撤销个数（较上周对比）
                </th>
                <th>
                  同期增长率（较上周对比）
                </th>
                <th>
                  差评撤销排名
                </th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(item,itemIndex) in revocationRateByFollower" :key="itemIndex">
                <td align="center">
                  {{ item.userName }}
                </td>
                <td align="center">
                  {{ item.backCount }}
                </td>
                <td align="center">
                  {{ item.backCountRate }} %
                </td>
                <td align="center">
                  {{ item.backOutAmountSum }}
                </td>
                <td align="center">
                  {{ item.avgBackOutAmount }}
                </td>
                <td align="center">
                  {{ item.backOutAmountRate }} %
                </td>

                <td align="center">
                  {{ item.payOutAmountSum }}
                </td>
                <td align="center">
                  {{ item.leftAmount }}
                </td>
                <td align="center">
                  {{ item.otherBackCount }}
                </td>
                <td align="center">
                  {{ item.otherBackCountRate }} %
                </td>
                <td align="center">
                  {{ item.otherBackOutAmountSum }}
                </td>
                <td align="center">
                  {{ item.otherBackOutAmountRate }} %
                </td>
                <td>{{ item.otherPayOutAmountSum }}</td>
                <td>{{ item.otherLeftAmount }}</td>
                <td>{{ item.totalPayOutAmountSum }}</td>
                <td>{{ item.totalLeftAmount }}</td>
                <td align="center">
                  {{ item.lastTotalBackCount }}
                </td>
                <td align="center">
                  {{ item.backCountIncRate }} %
                </td>
                <td align="center">
                  {{ item.ranking }}
                </td>
              </tr>
              </tbody>
            </table>
            <el-empty v-if="!revocationRateByStoreUser.length && !revocationRateByStoreUserLoading">

            </el-empty>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="发货投诉每日报表" name="dailyReport">
        <div>
          <el-form size="mini" inline>
            <el-form-item>
              <el-date-picker
                v-model="formData.dateRange4DailyReport.dateRange"
                type="daterange"
                range-separator="至"
                value-format="yyyy-MM-dd"
                style="width: 250px"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button @click="loadDailyReport" type="primary">搜索</el-button>
              <el-button @click="exportDailyReport" type="danger">导出</el-button>
            </el-form-item>
          </el-form>
          <div class="data-table">
            <table v-loading="dailyReportLoading">
              <thead>
              <tr>
                <th v-for="item in dailyReportDataList.titleList" :key="item">
                  {{ item }}
                </th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(item,itemIndex) in dailyReportDataList.rows" :key="itemIndex">
                <td align="center" v-for="i in dailyReportDataList.titleLength" :key="i">
                  {{ item[i - 1] }}
                </td>
              </tr>
              </tbody>
            </table>
            <el-empty v-if="!revocationRateByStoreUser.length && !revocationRateByStoreUserLoading">

            </el-empty>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <loading-dialog v-model="isExporting" loading-text="正在导出，请稍等"/>
  </el-card>
</template>

<script>
import { voteBadCommentApi } from '@/feature/cmt/infra/api/voteBadCommentApi'
import LineChart from '@/components/chart/LineChart'
import RaddarChart from '@/components/chart/RaddarChart'
import PieChart from '@/components/chart/PieChart'
import BarChart from '@/components/chart/BarChart'
import Chart from '@/components/chart/Chart'
import ExcelUtil from '@/framework/infra/excel/ExcelUtil'
import LoadingDialog from '@/framework/components/dialog/LoadingDialog'
import { storeApi } from '@/feature/mct/infra/api/storeApi'
import { adminApi } from '@/feature/mgr/infra/api/adminApi'
import moment from 'moment'
import { deliveryComplainApi } from '@/feature/cmt/infra/api/deliveryComplainApi'
import PayOutTypeEnum from '@/feature/cmt/infra/constants/PayOutTypeEnum'

export default {
  components: { LoadingDialog, Chart, BarChart, PieChart, RaddarChart, LineChart },
  created() {
    // this.loadTotalRevocationRate()
    this.loadRevocationRateByStore()
    // this.loadRevocationRateByFollower()
    this.loadStoreList()
    // this.loadUserList()
  },
  filters: {
    percentFormat(v) {
      return v.toFixed(2)
    }
  },
  computed: {

    storeBackoutRateOption() {
      return {
        title: {
          text: '店铺差评撤销率'
        },
        // toolbox: {
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        // legend: {
        //   data: ['撤销率']
        // },
        tooltip: {
          trigger: 'axis',
          formatter: params => {
            const param = params[0]
            return param.name + ' ' + param.marker + param.value + '%'
          },
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          axisTick: {
            alignWithLabel: true
          },
          data: this.revocationRateByStoreUser.map(el => el.storeTitle)
        },
        yAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLabel: {
            formatter: '{value} %'
          }
        },
        series: [
          {
            data: this.revocationRateByStoreUser.map(el => (el.rate * 100).toFixed(2)),
            barWidth: '20%',
            type: 'bar',
            name: '撤销率',
            showBackground: true,

            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      }
    },
    followerBackoutRateOption() {
      return {
        title: {
          text: '跟进人撤销率'
        },
        // toolbox: {
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        // legend: {
        //   data: ['撤销率']
        // },
        tooltip: {
          trigger: 'axis',
          formatter: params => {
            const param = params[0]
            return param.name + ' ' + param.marker + param.value + '%'
          },
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          axisTick: {
            alignWithLabel: true
          },
          data: this.revocationRateByFollower.map(el => el.followerName)
        },
        yAxis: {
          type: 'value',
          max: 100,
          axisTick: {
            show: false
          },
          axisLabel: {
            formatter: '{value} %'
          }
        },
        series: [
          {
            data: this.revocationRateByFollower.map(el => (el.rate * 100).toFixed(2)),
            barWidth: '20%',
            type: 'bar',
            name: '撤销率',
            showBackground: true,

            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      }
    }
  },
  data() {
    return {
      chartList: [],
      isExporting: false,
      storeList: [],
      payOutTypeOptions: PayOutTypeEnum.getOptions(),
      userList: [],
      activeName: 'store',
      formData: {
        dateRange4StoreUser: {
          storeId: '',
          userId: '',
          dateRange: [
            moment().startOf('month').format('YYYY-MM-DD'),
            moment().format('YYYY-MM-DD')
          ]
        },
        dateRange4Store: {
          dateRange: [
            moment().startOf('month').format('YYYY-MM-DD'),
            moment().format('YYYY-MM-DD')
          ]
        },
        dateRange4StoreDaily: {
          payOutType: '',
          dateRange: [
            moment().subtract(1, 'month').format('YYYY-MM-DD'),
            moment().format('YYYY-MM-DD')
          ]
        },
        dateRange4DailyReport: {
          payOutType: '',
          dateRange: [
            moment().startOf('month').format('YYYY-MM-DD'),
            moment().format('YYYY-MM-DD')
          ]
        },
        dateRange4Follower: []
      },
      totalRevocationRate: 0,
      revocationRateByStoreUserLoading: false,
      revocationRateByStoreDaily: [],
      revocationRateByStoreDailyLoading: false,
      revocationRateByFollowerLoading: false,
      dailyReportLoading: false,
      revocationRateByStoreUser: [],
      revocationRateByFollower: [],
      dailyReportDataList: []
      // ,
      // lineChartData: {
      //   expectedData: [100, 120, 161, 134, 105, 160, 165],
      //   actualData: [120, 82, 91, 154, 162, 140, 145]
      // }
    }
  },
  watch: {
    activeName() {
      if (this.activeName === 'store') {
        this.loadRevocationRateByStore()
      } else if (this.activeName === 'storeDaily') {
        this.loadRevocationRateByUserDaily()
      } else if (this.activeName === 'dailyReport') {
        this.loadDailyReport()
      } else {
        this.loadRevocationRateByUser()
      }
    }
  },

  methods: {
    loadStoreList() {
      storeApi.options().then(data => {
        this.storeList = data
      })
    },
    loadRevocationRateByUserDaily() {
      this.revocationRateByStoreDailyLoading = true
      deliveryComplainApi.queryRevocationRateByUserDaily(this.formData.dateRange4StoreDaily).then(data => {
        // this.revocationRateByStoreDaily = data
        this.chartList = [
          this.getChartOption(data, 'backOutAmountSum', '投诉赔付金额'),
          this.getChartOption(data, 'backCount', '投诉赔付数量')
        ]
      }).finally(() => {
        this.revocationRateByStoreDailyLoading = false
      })
    },
    loadUserList() {
      adminApi.listAll().then(data => {
        this.userList = data
      })
    },
    getChartOption(data, field, title) {
      const storeList = Array.from(new Set(data.map(el => el.storeName)))
      const dateSortedArr = data.map(el => el.date).sort()
      const minDate = dateSortedArr[0]
      const maxDate = dateSortedArr[dateSortedArr.length - 1]
      const startDate = moment(minDate)
      const days = moment(maxDate).diff(startDate, 'days')
      const dateList = []
      dateList.push(minDate)
      for (let i = 1; i <= days; i++) {
        dateList.push(startDate.add(1, 'days').format('YYYY-MM-DD'))
      }
      console.log(dateList)
      const dataMap = data.reduce((r, a) => {
        r[a.storeName] = r[a.storeName] || {}
        r[a.storeName][a.date] = a[field]
        return r
      }, {})
      const tableData = storeList.map(storeName => {
        return {
          name: storeName,
          data: dateList.map(date => dataMap[storeName][date] || 0).reduce((r, a) => r + a, 0).toFixed(2)
        }
      })
      tableData.push({
        name: '总计',
        data: tableData.reduce((r, a) => r + parseFloat(a.data), 0).toFixed(2)
      })
      return {
        title: {
          text: title
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: storeList
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: dateList
        },
        yAxis: {
          type: 'value'
        },
        tableData,
        series: storeList.map(storeName => {
          return {
            name: storeName,
            type: 'line',
            // stack: 'Total',
            smooth: false,
            data: dateList.map(date => dataMap[storeName][date] || 0)
          }
        })
      }
    },
    // loadTotalRevocationRate() {
    //   voteBadCommentApi.queryTotalRevocationRate().then(data => {
    //     this.totalRevocationRate = data * 100
    //   })
    // },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          if (column.property === 'payOutAmount') {
            sums[index] = '￥' + sums[index]
          }
          if (column.property === 'rate') {
            sums[index] = (sums[index] / values.length * 100).toFixed(2) + '%'
          }
        } else {
          sums[index] = 'N/A'
        }
      })

      return sums
    },
    getSummaries2(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计'
          return
        }

        const values = data.map(item => Number(item[column.property]))

        if (!values.every(value => isNaN(value))) {
          if (column.property === 'totalNum') {
            sums[index] = values[0]
          } else {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            if (column.property === 'payOutAmount') {
              sums[index] = '￥' + sums[index]
            }
            if (column.property === 'rate') {
              sums[index] = '100.00%'
            }
          }
        } else {
          sums[index] = 'N/A'
        }
      })

      return sums
    },
    // exportRevocationRateByStoreUser () {
    //   this.isExporting = true
    //   voteBadCommentApi.queryRevocationRateByStoreAndFollowerId(this.formData.dateRange4StoreUser).then(data => {
    //     const header = ['店铺名', '姓名', '店铺差评汇总', '店铺成立汇总', '店铺撤销汇总', '店铺差评赔付汇总', '差评撤销数', '差评赔付金额', '差评赔付金额占比', '个人撤销率占比']
    //     const exportedData = []
    //     if (data && data.length) {
    //       for (const row of data) {
    //         exportedData.push([row.storeTitle, row.followerName, row.storeTotalNum, row.storeBadNum, row.storeBackOutNum, row.storePayOutAmount, row.backOutNum, row.payOutAmount, row.payOutAmountPercent, row.backOutNumPercent])
    //       }
    //     }
    //     ExcelUtil.exportTable({
    //       header,
    //       data: exportedData,
    //       filename: '店铺差评撤销率统计'
    //     })
    //   }).finally(() => {
    //     this.isExporting = false
    //   })
    // },
    exportRevocationRateByStore() {
      // this.$message.info('开发中')
      // return
      this.isExporting = true
      deliveryComplainApi.queryStoreStaticByPayOutType(this.formData.dateRange4StoreUser).then(data => {
        const header = ['店铺']
        this.payOutTypeOptions.forEach(op => {
          const item = [
            op.label
          ]
          const extra = ['投诉赔付金额', '投诉赔付数量', '投诉赔付金额占比', '投诉赔付增长率（同期）']
          if (op.value === 0 || op.value === 3) {
            extra.push('本应赔付金额')
            extra.push('结余金额')
          }
          item.push(extra)
          header.push(item)
        })
        header.push('本应赔付金额汇总')
        header.push('结余金额汇总')
        header.push('店铺赔付总计')
        header.push('店铺赔付增长率（同期）')
        const exportedData = []
        if (data && data.length) {
          for (const row of data) {
            const item = [
              row.storeName
            ]
            for (const op of this.payOutTypeOptions) {
              item.push(row.typeData[op.value].payOutAmount || 0)
              item.push(row.typeData[op.value].payOutCount || 0)
              item.push((row.typeData[op.value].payOutAmountRate || 0) + '%')
              item.push((row.typeData[op.value].payOutCountIncRate || 0) + '%')
              if (op.value === 0 || op.value === 3) {
                item.push(row.typeData[op.value].originPayOutAmount || 0)
                item.push(row.typeData[op.value].leftAmount || 0)
              }
            }
            item.push(row.originPayOutAmount)
            item.push(row.leftAmount)
            item.push(row.payOutAmount)
            item.push(row.payOutCountIncRate + '%')
            exportedData.push(item)
          }
        }
        ExcelUtil.exportTable({
          header,
          data: exportedData,
          filename: '店铺发货投诉赔付统计'
        })
      }).finally(() => {
        this.isExporting = false
      })
    },
    exportRevocationRateByUser() {
      this.isExporting = true
      deliveryComplainApi.queryUserDeliveryComplainStaticList(this.formData.dateRange4Store).then(data => {
        const header = ['姓名',
          '投诉撤销汇总',
          '投诉撤销占比',
          '投诉赔付金额汇总',
          '撤销赔付平均金额',
          '投诉赔付金额占比',
          '撤销本应赔付金额',
          '撤销节余金额',
          '其他（劝退款赔付）',
          '其他赔付占比',
          '其他（劝退款赔付金额）',
          '其他赔付金额占比',
          '劝退本应赔付金额',
          '劝退节余金额',
          '本应赔付金额汇总',
          '节余金额汇总',
          '同期撤销个数（较上周对比）',
          '同期增长率（较上周对比）',
          '差评撤销排名']
        const exportedData = []
        if (data && data.length) {
          for (const row of data) {
            exportedData
              .push([
                row.userName,
                row.backCount,
                row.backCountRate + '%',
                row.backOutAmountSum,
                row.avgBackOutAmount,
                row.backOutAmountRate + '%',
                row.payOutAmountSum,
                row.leftAmount,
                row.otherBackCount,
                row.otherBackCountRate + '%',
                row.otherBackOutAmountSum,
                row.otherBackOutAmountRate + '%',
                row.otherPayOutAmountSum,
                row.otherLeftAmount,
                row.totalPayOutAmountSum,
                row.totalLeftAmount,
                row.lastTotalBackCount,
                row.backCountIncRate + '%',
                row.ranking
              ])
          }
        }
        ExcelUtil.exportTable({
          header,
          data: exportedData,
          filename: '个人发货投诉赔付统计'
        })
      }).finally(() => {
        this.isExporting = false
      })
    },
    // loadRevocationRateByStoreUser () {
    //   this.revocationRateByStoreUserLoading = true
    //   deliveryComplainApi.queryRevocationRateByStoreAndFollowerId(this.formData.dateRange4StoreUser).then(data => {
    //     this.revocationRateByStoreUser = data
    //   }).finally(() => {
    //     this.revocationRateByStoreUserLoading = false
    //   })
    // },
    loadRevocationRateByStore() {
      this.revocationRateByStoreUserLoading = true
      deliveryComplainApi.queryStoreStaticByPayOutType(this.formData.dateRange4StoreUser).then(data => {
        this.revocationRateByStoreUser = data
      }).finally(() => {
        this.revocationRateByStoreUserLoading = false
      })
    },
    loadRevocationRateByUser() {
      this.revocationRateByFollowerLoading = true
      deliveryComplainApi.queryUserDeliveryComplainStaticList(this.formData.dateRange4Store).then(data => {
        this.revocationRateByFollower = data
      }).finally(() => {
        this.revocationRateByFollowerLoading = false
      })
    },
    loadDailyReport() {
      this.dailyReportLoading = true
      deliveryComplainApi.queryDailyReport(this.formData.dateRange4DailyReport).then(data => {
        this.dailyReportDataList = data
      }).finally(() => {
        this.dailyReportLoading = false
      })
    },
    exportDailyReport() {
      this.dailyReportLoading = true
      deliveryComplainApi.queryDailyReport(this.formData.dateRange4DailyReport).then(data => {
        const header = data.titleList
        const exportedData = data.rows
        // if (data && data.length) {
        //   for (const row of data) {
        //     exportedData
        //       .push(row)
        //   }
        // }
        ExcelUtil.exportTable({
          header,
          data: exportedData,
          filename: '发货投诉每日报表'
        })
      }).finally(() => {
        this.dailyReportLoading = false
      })
    }
    // loadRevocationRateByFollower () {
    //   this.revocationRateByFollowerLoading = true
    //   voteBadCommentApi.queryRevocationRateByFollowerId(this.formData.dateRange4Follower).then(data => {
    //     this.revocationRateByFollower = data
    //   }).finally(() => {
    //     this.revocationRateByFollowerLoading = false
    //   })
    // }

  }
}
</script>

<style scoped lang="scss">
.data-table {
  white-space: nowrap;
  overflow-y: auto;
  padding-bottom: 50px;
}

.chart-data {
  padding: 30px 0;
  display: flex;
  flex-direction: row;

  &__table {
    width: 300px;
    padding-left: 10px;
  }

  &__chart {
    flex: 1;
  }
}

.card_fitTitle {
  font-size: 14px;
  color: #999;
  padding-bottom: 10px;

}

.center {
  text-align: center;
}

.card-num {
  font-size: 24px;
  padding-bottom: 10px;
}

.card-unit {
  font-size: 12px;
}

.news {

  &__sep {
    margin: 0 15px;
  }

  &__content {
    color: #999;
  }

}

.card-txt {
  font-size: 14px;
}

.short-cut {
  text-align: center;
  font-size: 14px;
  margin-bottom: 15px;
  float: left;
  margin-right: 30px;
}

.short-cuts-content {
  overflow: hidden;
  box-sizing: border-box;
}

.short-icon {
  display: block;
  font-size: 30px;
  margin-bottom: 5px;
}

.short-cuts-title {
  padding-bottom: 30px;
}

.todolist {
  padding: 50px 0 10px 0;
}

.todolist .el-row {
  padding-bottom: 15px;
}

.todo-title {
  padding-bottom: 30px;
  font-size: 18px;
  font-weight: bold;
}

.short-cuts-title {
  font-size: 18px;
  font-weight: bold;
}

.todo-block {
  text-align: center;
  display: inline-block;
  width: 120px;
  margin-bottom: 20px;
}

.todo-txt {
  font-size: 14px;
}

.todo-block .todo-num {
  font-size: 18px;
  padding-bottom: 10px;
}
</style>
